<template>
	<view class="container">
		
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 背景色区域 -->
			<view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
			<swiper class="carousel" circular @change="swiperChange" :autoplay="true" :interval="3000">
				<swiper-item v-for="(item, index) in bannerList" :key="index" class="carousel-item"><image :src="item.thumb" /></swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{ swiperCurrent + 1 }}</text>
				<text class="sign">/</text>
				<text class="num">{{ bannerList.length }}</text>
			</view>
		</view>
		
		<!-- 新闻通知 -->
		<rf-swiper-slide v-if="articleList.length > 0" :list="articleList" class="rf-skeleton" @navTo="$api.toUrl(`/pages/notice/notice`)">
			<view slot="header" class="swiper-slide-header">
				<text class="iconfont icongonggao"></text>
			</view>
		</rf-swiper-slide>
		
		<view class="cate-section">
			<view v-for="(item, index) in goods_category0" :key="index" class="cate-item" @click="$api.toUrl(`/pages/menu0/list?catid=${item.id}`)">
				<image :src="item.thumb||'/static/images/errorImage.jpg'"></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
		
		<view class="tile-info">
			<view class="tile-left"  @click="$api.toUrl(`/pages/menu0/list`)">
				<image src="/static/images/1.png" class="image"></image>
			</view>
			<view class="tile-right">
				<view class="tile" @click="$api.toUrl(`/pages/share/QRcode`)">
					<image src="/static/images/2x.jpg" class="image"></image>
				</view>
				<view class="tile" @click="$api.toUrl(`/pages/notice/notice`)">
					<image src="/static/images/3.jpg" class="image"></image>
				</view>
			</view>
		</view>
		
		
		<!-- 自营商城 -->
		<view class="f-header m-t" @click="$api.toUrl(`/pages/menu0/list`)">
			<view class="tit-box">
				<text class="tit">自营商城</text>
			</view>
			<text class="more">查看更多</text>
		</view>
		<!-- 分类 -->
		
		<view class="goods0-section">
			<view v-for="(item, index) in goods0" :key="index" class="goods-item" @click="$api.toUrl(`/pages/menu0/detail?id=${item.id}`)">
				<view class="image-wrapper"><image :src="item.thumb" mode="aspectFill"></image></view>
				<text class="title clamp">{{ item.name }}</text>
				<view class="price-box">
					<text class="price">￥{{ item.price }}</text>
					<text class="marketprice" v-if="item.marketprice > 0" >￥{{ item.marketprice }}</text>
					<!-- <text>库存 {{ item.stocknum }}</text> -->
				</view>
			</view>
		</view>
		
		<!-- 广告 -->
		<view class="adv"><image src="/static/images/index/adv1.png" mode="widthFix"></image></view>
		
		<!-- 消费专区 -->
		<view class="f-header m-t" @click="$api.toTab(`/pages/menu1/list`)">
			<view class="tit-box">
				<text class="tit">消费专区</text>
			</view>
			<text class="more">更多</text>
		</view>
		<view class="goods1-section">
			<view v-for="(item, index) in goods1" :key="index" class="goods-item" @click="navToDetail1(item)">
				<image class="goods-img" :src="item.thumb || '/static/images/errorImage.jpg'" mode="aspectFill"></image>
				<view class="right">
					<view class="title clamp">{{ item.name }}</view>
					<view class="price1">￥{{ item.price }}</view>
					<view class="des"><text>{{ item.description }}</text></view>
				</view>
			</view>
		</view>
		
		<!-- 弹窗 -->
		<view class="pop" v-show="vanish">
			<view class="window">
				<view class="top">
					<view class="image">
						<image src="/static/images/update.png"></image>
					</view>
					<view class="text">
						<text>{{ notice.android_title }}</text>
					</view>
				</view>
				<!-- 提示信息 -->
				<view class="message">
					<view class="main">
						<view class="contenti" v-html="this.notice.android_notice">
							<text>{{ notice.android_notice }}</text>
						</view>
					</view>
					<view class="bottom">
						<view class="progress-box">
							<progress :percent="progress" activeColor="#ff0000" backgroundColor="#09BB07" stroke-width="3" show-info="true" font-size="12" />
						</view>
						<button @click="subNotice(notice)">{{ notice.btnTxt }}</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗结束 -->
		
	</view>
</template>

<script>
import rfSwiperSlide from '@/components/rf-swiper-slide';
export default {
	components: {
		rfSwiperSlide
	},
	data() {
		return {
			
			titleNViewBackground: '',
			swiperCurrent: 0,
			swiperLength: 0,
			
			version: '', //获取APP自带的版本号
			notice: {}, // 升级通知公告
			vanish: false,
			progress: 0,
			
			token: '',
			bannerList: [],
			articleList: [],
			goods0: [],
			goods1: [],
			goods_category0: [],
		};
	},

	onLoad() {
		this.token = this.$api.get('token');
		this.loadData();
	},
	
	onShow() {
		// #ifdef APP-PLUS
		this.checkInfo();
		// #endif
	},
	
	methods: {
		
		//app自动升级相关代码------------------------------
		subNotice(notice) {
			if(this.notice.appVersonStatus == 1){
				// #ifdef APP
				if(this.notice.version != this.version){
					plus.runtime.openURL(this.notice.url, function(res) {
						console.log(this.notice.url);
					});
				}
				// #endif
				return;
			}
			this.AndroidCheckUpdate(notice.url);
		},
		AndroidCheckUpdate(url) {
			
			const downloadTask = uni.downloadFile({
				url: url,
				success: res => {
					if (res.statusCode === 200) {
						plus.runtime.install(res.tempFilePath, {
								force: false
							},
							function() {
								this.vanish = true;
								plus.runtime.restart();
							},
							function(e) {
								uni.showModal({
									content: e.message,
									success: e => {
										if (e.confirm) {}
									}
								});
							}
						);
					}
				}
			});
			
			downloadTask.onProgressUpdate((res) => {
			     this.progress = res.progress;
			});
		},
		
		checkInfo() {
			let that = this;
			
			plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
				var platform = uni.getSystemInfoSync().platform;
				//console.log(widgetInfo);
				var version = widgetInfo.version;
				this.version = widgetInfo.version;
				
				that.$http.request('Index', 'get_app_version', 'GET', {
						token: this.token,
						version: version,
					}, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							console.log(res.data.data);
							if(res.data.data.vanish){
								that.vanish = true;
							}else{
								that.vanish = false;
							}
							that.notice = res.data.data;
							
						}
					}
				});
			});
		},
		
		//app自动升级相关代码------------------------------
		
		/**
		 * 请求静态数据只是为了代码不那么乱
		 * 分次请求未作整合
		 */
		async loadData() {
			const param = {
				token: this.token
			};
			await this.$http.request('Index', 'indexinfo', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.bannerList = res.data.data.bannerList;
						this.articleList = res.data.data.articleList;
						this.goods0 = res.data.data.goods0;
						this.goods1 = res.data.data.goods1;
						this.goods_category0 = res.data.data.goods_category0;
					}
				}
			});
		},
		
		//轮播图切换修改背景色
		swiperChange(e) {
			const index = e.detail.current;
			this.swiperCurrent = index;
			this.titleNViewBackground = this.bannerList[index].background;
		},
		
	}
	
};
</script>

<style lang="scss">

page {
	background: #F9F9F9;
}

/* 头部 轮播图 */
.carousel-section {
	position: relative;

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
	}

	.titleNview-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 426upx;
		transition: 0.4s;
	}
	
	.firstVideo{
		width: 100%;
	}
}

.carousel {
	width: 100%;
	height: 350upx;

	.carousel-item {
		width: 100%;
		height: 100%;
		padding: 0upx;
		overflow: hidden;
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}
}
.swiper-dots {
	display: flex;
	position: absolute;
	left: 40upx;
	bottom: 20upx;
	width: 72upx;
	height: 36upx;
	background-image: url();
	background-size: 100% 100%;

	.num {
		width: 36upx;
		height: 36upx;
		border-radius: 50px;
		font-size: 24upx;
		color: #fff;
		text-align: center;
		line-height: 36upx;
	}

	.sign {
		position: absolute;
		top: 0;
		left: 50%;
		line-height: 36upx;
		font-size: 12upx;
		color: #fff;
		transform: translateX(-50%);
	}
}

/* 栏目 */
.lanmu-section {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 20upx 20upx;
	background: #fff;
	
	.cate-item {
		display: flex;
		flex-direction: column;
		width: 32%;
		position: relative;
		
		&:nth-child(3n + 1) {
			margin-right: 2%;
		}
		&:nth-child(3n + 2) {
			margin-right: 2%;
		}
		
		image {
			width: 100%;
		}
		text{
			position: absolute;
			right: 20upx;
			top: 20upx;
			width: 38upx;
			font-size: 32upx;
			line-height: 40upx;
			font-weight: bold;
			color: #fff;
		}
	}
}


/* 分类 */
.cate-section {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 30upx 22upx;
	background: #fff;
	
	.cate-item {
		display: flex;
		flex-direction: column;
		width: 20%;
		margin: 20upx 0upx 20upx 0upx;
		align-items: center;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
	}
	
	/* 原图标颜色太深,不想改图了,所以加了透明度 */
	image {
		width: 88upx;
		height: 88upx;
		margin-bottom: 14upx;
		border-radius: 50%;
		opacity: 0.7;
		box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
	}
}

/* 板块 */
.tile-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 340rpx;
	padding: 0 10rpx;
	margin-bottom: 20rpx;

	.tile-left {
		width: 48%;
		height: 340rpx;

		.image {
			width: 100%;
			height: 340rpx;
			border-radius: 20rpx;
		}
	}

	.tile-right {
		justify-content: space-between;
		width: 49%;
		height: 340rpx;

		.tile {
			margin-bottom: 20rpx;
			width: 100%;
			height: 160rpx;

			.image {
				width: 100%;
				height: 160rpx;
				border-radius: 20rpx;
			}
		}
	}
}


/* 滚动新闻 */
.rf-skeleton{
	padding: 0upx 0upx;
	background: #F8F6FC;
}

.f-header {
	display: flex;
	align-items: center;
	height: 80upx;
	padding: 20upx 30upx 20upx 30upx;
	margin-top: 20upx;
	background: #fff;
	
	.tit-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		
		.tit {
			font-size: $font-lg + 2upx;
			color: #font-color-dark;
			line-height: 1.3;
		}
		.tit2 {
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	
	.more {
		font-size: 20upx;
		color: #999999;
		width: 120upx;
		height: 42upx;
		line-height: 40upx;
		text-align: center;
		border: solid 2upx #999999;
		border-radius: 30upx;
	}
}

.adv{
	width: 100%;
	margin-top: 20upx;
	
	image{
		width: 100%;
	}
}

/* 自营专区 */
.goods0-section {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20upx;
	background: #fff;
	
	.goods-item {
		display: flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 40upx;
		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
	}
	.image-wrapper {
		width: 100%;
		height: 330upx;
		border-radius: 3px;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title {
		font-size: $font-lg;
		color: $font-color-dark;
		line-height: 80upx;
	}
	.price-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10upx;
		font-size: 24upx;
		color: $font-color-light;
	}
	.price {
		font-size: $font-lg;
		color: $uni-color-primary;
		line-height: 1;
	}
	.marketprice{
		text-decoration:line-through;
	}
}


/* 消费专区 */
.goods1-section {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20upx;
	background: #fff;
	
	.goods-item {
		display: flex;
		padding: 20upx 0;
		width: 100%;
		
		.goods-img {
			display: block;
			width: 180upx;
			height: 180upx;
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 0upx 0 24upx;
			overflow: hidden;
			width: 100%;
			
			
			.title {
				font-size: 30upx;
				height: 40upx;
				line-height: 40upx;
				overflow: hidden;
				font-weight: bold;
				color: $font-color-dark;
			}
			
			.price {
				font-size: 36upx;
				line-height: 40upx;
				color: #ff0000;
				margin-top: 10upx;
				
				text{
					color: #999;
					font-size: 24upx;
					margin-left: 10upx;
				}
			}
			
			.price1 {
				font-size: 36upx;
				line-height: 40upx;
				color: #4399fc;
				margin-top: 10upx;
				
				text{
					color: #999;
					font-size: 24upx;
					margin-left: 10upx;
				}
			}
			
			.des {
				font-size: 36upx;
				line-height: 40upx;
				color: #ff0000;
				
				text{
					color: #999;
					font-size: 24upx;
				}
			}
			
			
		}
	}
	
}

.pop {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 5000;

	.window {
		position: relative;
		width: 550upx;
		height: 600upx;
		margin: 200upx auto;
		margin-top: 60%;
		margin-bottom: 60%;

		.top {
			position: relative;

			.image {
				margin: 0 auto;
				width: 100%;
				height: 160upx;

				image {
					width: 100%;
					height: 160upx;
				}
			}

			.text {
				position: absolute;
				top: 40upx;
				left: 40upx;

				text {
					color: #ffffff;
					font-size: 42upx;
				}
			}
		}

		.message {
			background-color: #fff;

			.main {
				background-color: #ffffff;

				.contenti {
					margin: 0upx 0 44upx 44upx;
					width: 446upx;
					max-height: 500upx;
					overflow: auto;

					text {
						color: #333333;
						font-size: 24upx;
						line-height: 50upx;
					}
				}
			}
		}

		.bottom {
			width: 400upx;
			margin: 0 auto;
			padding-bottom: 30upx;

			button {
				background-color: #ef5646;
				font-size: 30upx;
				border-radius: 40upx;
				color: #ffffff;
				height: 60upx;
				line-height: 60upx;
				width: 300upx;
			}
		}
	}

	.icon {
		position: absolute;
		bottom: -25%;
		left: 50%;
		width: 72upx;
		height: 72upx;
		transform: translateX(-50%);

		image {
			margin: 0 auto;
			width: 72upx;
			height: 72upx;
		}
	}
}

.icp_info{
	background-color: #ff0000;
	padding: 20upx 0upx;
	text-align: center;
	line-height: 40upx;
	
	.cont0{
		color: #fff;
		font-size: 28upx;
	}
	.cont1{
		color: #fcda91;
		font-size: 26upx;
	}
	.cont2{
		color: #fcda91;
		font-size: 26upx;
	}
	.cont3{
		color: #fcda91;
		font-size: 26upx;
	}
	
}

/* 升级弹窗 */
.pop {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 5000;

	.window {
		position: relative;
		width: 550upx;
		height: 600upx;
		margin: 200upx auto;
		margin-top: 60%;
		margin-bottom: 60%;

		.top {
			position: relative;

			.image {
				margin: 0 auto;
				width: 100%;
				height: 100upx;
				background-color: #E93930;

				image {
					width: 100%;
					height: 100upx;
				}
			}

			.text {
				position: absolute;
				top: 20upx;
				left: 40upx;

				text {
					color: #ffffff;
					font-size: 42upx;
				}
			}
		}

		.message {
			background-color: #fff;

			.main {
				background-color: #ffffff;

				.contenti {
					margin: 0upx 0 44upx 44upx;
					padding: 20upx 0upx 0upx 0upx;
					width: 446upx;
					max-height: 500upx;
					overflow: auto;

					text {
						color: #333333;
						font-size: 24upx;
						line-height: 50upx;
					}
				}
			}
		}

		.bottom {
			width: 400upx;
			margin: 0 auto;
			padding-bottom: 30upx;
			
			.progress-box{
				height: 50upx;
			}
			
			button {
				background-color: #ef5646;
				font-size: 30upx;
				border-radius: 40upx;
				color: #ffffff;
				height: 60upx;
				line-height: 60upx;
				margin-top: 10upx;
				width: 300upx;
			}
		}
	}

}
	
</style>
